{% extends 'base.html' %}

{% block content %}
<div class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-800 mb-4">学生成绩预测</h1>
    <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        输入学生的出勤、作业和期中成绩，预测期末是否挂科及可能的分数段
    </p>
</div>

<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
            <i class="fa fa-pencil-square-o text-primary mr-3"></i>输入学生成绩
        </h2>

        <form method="POST" action="/predict" class="space-y-6">
            <div>
                <label for="attendance" class="block text-sm font-medium text-gray-700 mb-1">出勤成绩 (0-100)</label>
                <input type="number" id="attendance" name="attendance" min="0" max="100" step="0.1" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
            </div>

            <div>
                <label for="homework" class="block text-sm font-medium text-gray-700 mb-1">作业成绩 (0-100)</label>
                <input type="number" id="homework" name="homework" min="0" max="100" step="0.1" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
            </div>

            <div>
                <label for="midterm" class="block text-sm font-medium text-gray-700 mb-1">期中成绩 (0-100)</label>
                <input type="number" id="midterm" name="midterm" min="0" max="100" step="0.1" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom">
            </div>

            <div class="pt-4">
                <button type="submit" class="w-full bg-primary hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center">
                    <i class="fa fa-line-chart mr-2"></i>预测期末成绩
                </button>
            </div>
        </form>
    </div>

    <div class="bg-blue-50 border border-blue-100 rounded-xl p-6">
        <h3 class="text-lg font-medium text-blue-800 mb-3 flex items-center">
            <i class="fa fa-info-circle mr-2"></i>预测说明
        </h3>
        <ul class="space-y-2 text-sm text-blue-700">
            <li class="flex items-start">
                <i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
                <span>挂科预测基于逻辑回归模型，预测学生期末是否会挂科（成绩<60分）</span>
            </li>
            <li class="flex items-start">
                <i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
                <span>分数段预测基于决策树模型，将成绩分为10个分数段（0-9, 10-19, ..., 90-100）</span>
            </li>
            <li class="flex items-start">
                <i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
                <span>预测结果基于生成的模拟数据训练，实际应用时建议使用真实学生数据</span>
            </li>
        </ul>
    </div>
</div>
{% endblock %}